<template>
  <div class="app-container">

     <el-form label-width="120px">

      <el-form-item label="banner名称">
        <el-input v-model="cmsInfo.title"/>
      </el-form-item>

      <el-form-item label="banner排序">
        <el-input-number v-model="cmsInfo.sort" controls-position="right" min="0"/>
      </el-form-item>

        

      <!-- banner图片 -->
       <el-form-item label="banner图片">

            <el-upload
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                :action="BASE_API+'/eduoss/fileoss'"
                class="avatar-uploader">
                <img :src="cmsInfo.imageUrl" width="300px" height="250px">
            </el-upload>

        </el-form-item>

      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>
<script>
import cms from '@/api/edu/cms'
import Tinymce from '@/components/Tinymce' //引入组件
export default {
components: { Tinymce },
  data() {
    return {
      cmsInfo:{
        title: '',
        sort: 0,
        imageUrl: '/static/01.png',
        linkUrl: '',
      },

      BASE_API:process.env.BASE_API, //获取dev.env.js里面地址
      saveBtnDisabled:false  // 保存按钮是否禁用,
    }
  },
  created() { //页面渲染之前执行
    this.init()
  },
  watch: {  //监听
    $route(to, from) { //路由变化方式，路由发生变化，方法就会执行
      this.init()
    }
  },
  methods:{
      //上传封面成功调用的方法
        handleAvatarSuccess(res, file) {
            this.cmsInfo.imageUrl = res.data.url
        },
        //上传之前调用的方法
        beforeAvatarUpload(file) {
            const isPNG = file.type === 'image/png'
            const isLt2M = file.size / 1024 / 1024 < 2

            if (!isPNG) {
                this.$message.error('上传头像图片只能是 png 格式!')
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!')
            }
            return isPNG && isLt2M
        },
    
    //上传成功方法
    
    //路径跳转清空表单
    init() {
      //判断路径有id值,做修改
      if(this.$route.params && this.$route.params.id) {
          //从路径获取id值
          const id = this.$route.params.id
          //调用根据id查询的方法
          this.getInfo(id)
      } else { //路径没有id值，做添加
        //清空表单
        this.cmsInfo = {}
      }
    },
    //根据id查询banner的方法
    getInfo(id) {
      cms.getBanner(id)
        .then(response => {
          this.cmsInfo = response.data.crmBanner
        })
    },
    saveOrUpdate() {
      //判断修改还是添加
      //根据teacher是否有id
      if(!this.cmsInfo.id) {
        //添加
        this.saveCms()
      } else {
        //修改
        this.updateCms()
      }
    },
    //修改讲师的方法
    updateCms() {
      cms.updateBanner(this.cmsInfo)
        .then(response => {
          //提示信息
          this.$message({
              type: 'success',
              message: '修改成功!'
          });
          //回到列表页面 路由跳转
          this.$router.push({path:'/cms/list'})
        })
    },
    //添加讲师的方法
    saveCms() {
      cms.addBanner(this.cmsInfo)
        .then(response => {//添加成功
          //提示信息
          this.$message({
              type: 'success',
              message: '添加成功!'
          });
          //回到列表页面 路由跳转
          this.$router.push({path:'/cms/list'})
        })
    }

  }
}
</script>
